<template>
  <div class="apt-table">
    <Form :wrapper-col="{ span: 14 }" class="pb15">
      <Row :gutter="[24, 24]">
        <Col :span="9">
          <FormItem label="资质类型" :labelCol="{span:5 }" :wrapperCol="{span:17,offset:1  }">
            <Select v-model:value="queryParam.qualType">
              <Option :value="item.code" v-for="item in aptTypes">{{ item.itemName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col :span="9">
          <FormItem label="企业名称" :labelCol="{span:5 }" :wrapperCol="{span:17,offset:1  }">
            <Input
                v-model:value="queryParam.corpName"
                placeholder="请输入企业名称"
            />
          </FormItem>
        </Col>
        <Col :span="6" class="text-right">
          <Button type="primary" ghost @click="handleReset">重置</Button>
          <Button type="primary" @click="handleSearch">立即查询</Button>
        </Col>
      </Row>
    </Form>
    <div class="tbr-border">
      <Table
          :dataSource="dataSource"
          :columns="queryParam.colType == '2' ? columns2 : columns"
          :loading="loading"
          :pagination="pagination"
          :rowKey="(dataSource) => dataSource.applyId"
          @change="handleTableChange"
      >
        <template #num="{ index }">
            <span>{{
                (pagination.current - 1) * pagination.pageSize +
                parseInt(index) + 1
              }}</span>
        </template>

        <template #merge="{ text , record }">
            <p class="mb0 bold">{{text}}</p>
            <p class="mb0 gray6">{{record.corpCreditCode}}</p>
        </template>

        <template #se="{ text , record }">
          <p class="mb0">{{record.apyQualItemName}}</p>
          <p class="mb0 blue">{{text}}</p>
        </template>

        <template #result="{ text }">
          <Tag :color="ColorMapping[parseInt(text)].color">
            {{ColorMapping[parseInt(text)].text}}
          </Tag>
        </template>
        <template #date="{ text , record }">

          <span v-if="queryParam.colType == '1'">
            {{ parseTime(parseInt(record.pubSdate)) }} ~ {{ parseTime(parseInt(text)) }}
          </span>
          <span v-else>
            {{ parseTime(parseInt(text)) }}
          </span>
        </template>

        <template #detail="{ text }">
          <a class="blue" :href="`/notice/${text}`">查看</a>
        </template>
      </Table>
    </div>
  </div>
</template>

<script lang="ts" >
import { Row, Col, Form, Input, Button, Table , Tag , Select} from "ant-design-vue";
import {defineComponent, ref, onMounted, reactive, toRefs, PropType, watch} from "vue";
import {getAptNoticeList, getAptqualItem, ColorMapping, comTypes, aType} from '/@/api/public';
import { parseTime } from '/@/utils';

interface queryConfig {
  colType: string;
  corpName: string;
  domainId: any;
  qualType: string;
  current: number;
  size: number;
}

interface pageConfig {
  current: number;
  total: number;
  pageSize: number;
}

enum domain  {
  "0g6w1-fn0g00-001uu" = 0 , //新疆维吾尔自治区住房和城乡建设厅
  "0g6wc-4g7gf0-00dgp" = 1 , //"乌鲁木齐市建设局"
  "0g7xg-g7g4f0-009nr" = 1 , //伊犁哈萨克自治州阿勒泰地区住房和城乡建设局
  "0g7we-s1crf0-00q7p" = 1 , //伊犁哈萨克自治州塔城地区住房和城乡建设局
  "0g7wb-ufs8f0-00xhr" = 1 , //伊犁哈萨克自治州住房和城乡建设局
  "0g7w9-phnvf0-008vk" = 1 , //和田地区住房和城乡建设局
  "0g7w6-dsvvf0-0007g" = 1 , //喀什地区住房和城乡建设局
  "0g7w4-wearf0-008ce" = 1 , //克孜勒苏柯尔克孜自治州住房和城乡建设局（人民防空办公室）
  "0g7w1-rm1cf0-00f2c" = 1 , //阿克苏地区住房和城乡建设局
  "0g7vx-q37gf0-009uq" = 1 , //巴音郭楞蒙古自治州住房和城乡建设局
  "0g7vt-b1kmf0-0014k" = 1 , //博尔塔拉蒙古自治州住房和城乡建设局
  "0g7vn-mp1cf0-00mse" = 1 , //哈密市住房和城乡建设局
  "0g7vm-2mgcf0-00f2w" = 1 , //吐鲁番市住房和城乡建设局
  "0g7p7-swbrf0-00b6p" = 1 , //昌吉回族自治州住房和城乡建设局
  "0g7ts-y0n0f0-00u0c" = 1 , //克拉玛依市住房和城乡建设局
  "0g7wd-p818f0-005f0" = 1 , //霍尔果斯市住房和城乡建设局
  "0g84t-8k40f0-003re" = 1 , //喀什经济开发区规划土地建设环保局
}

export default defineComponent({
  name: "aptNotice2",
  components: {
    Row, Col, Form, FormItem: Form.Item,
    Tag, Input, Button, Table, Select,
    Option: Select.Option
  },

  props: {
    type: {
      type: String as PropType<string>,
      default: '1'
    },
    domainId: {
      type: String as PropType<string>,
      default: ''
    }
  },

  setup(props) {


    let situation = [
        [
          {code:'QY_TYPE_SG' , itemName:'建筑业企业资质'},
          {code:'QY_TYPE_KC' , itemName:'勘察企业资质'},
          {code:'QY_TYPE_SJ' , itemName:'设计企业资质'},
          {code:'QY_TYPE_JL' , itemName:'监理企业资质'},
          {code:'QY_TYPE_GCZLJC' , itemName:'工程质量检测资质'},
          {code:'QY_TYPE_ZJZX' , itemName:'工程造价咨询资质'},
          {code:'QY_TYPE_KF' , itemName:'房地产开发企业资质'},
          {code:'QY_TYPE_GJ' , itemName:'房地产估价机构备案资质'}
        ],
      [
        {code:'QY_TYPE_SG' , itemName:'建筑业企业资质'},
        {code:'QY_TYPE_KF' , itemName:'房地产开发企业资质'},
        {code:'QY_TYPE_GJ' , itemName:'房地产估价机构备案资质'}
      ]
    ]

    const { type , domainId } = toRefs(props);
    let num = 0 ;
    //公示不能有 房地产估价机构备案资质 这个选项
    if(props.type==="1")situation[0] = situation[0].slice(0,situation[0].length-1);
    if(props.domainId){
      num = domain[props.domainId]
    }
    const aptTypes = ref(situation[num]);



    const dataSource = ref<unknown[]>([])
    const colType:any =  type;
    const loading = ref<boolean>(true);

    const paginationRef = ref<pageConfig>({
      current: 1,
      total: 0,
      pageSize: 10 //每页中显示10条数据
    })


    let queryParam = reactive<queryConfig>({
      colType: colType,
      corpName: "",
      domainId:domainId,
      qualType: "QY_TYPE_SG",
      current: 1,
      size: 10
    })

    const tabChange = () => {
      getTableList();
    }

    const handleTableChange = (data: pageConfig) => {
      paginationRef.value = data;
      queryParam.current = data.current;
      queryParam.size = data.pageSize;
      getTableList();
    }

    const getTableList = async () => {
      loading.value = true;
      let data = await getAptNoticeList(queryParam);
      paginationRef.value.total = data.total;
      paginationRef.value.pageSize = data.size;
      dataSource.value = data.records;
      loading.value = false;
    }

    const getQualItem = async () => {
      loading.value = true;
      aptTypes.value  = await getAptqualItem({ colType } );
      loading.value = false;
    }

    const handleSearch = async () => {
      paginationRef.value.current =  1;
      queryParam.current = 1;
      await getTableList();
    }

    const handleReset = () => {
      paginationRef.value.current =  1;
      Object.assign(queryParam,{
        corpName: "",
        current:1
      })
      getTableList();
    }

    watch(domainId, (cur)=> {
      //console.log(cur);
      num = domain[cur];
      aptTypes.value = situation[num];
      getTableList();
    })

    onMounted(() => {
      // getQualItem() // 取消获取菜单配置
      getTableList();
    });

    //公示
    const columns = [
      {
        title: "序号",
        width:80,
        align:"center",
        slots: { customRender: 'num' }
      },
      {
        title: "企业名称",
        width: 190 ,
        dataIndex: "corpName",
        slots: {
          customRender: 'merge'
        }
      },
      {
        title: "申请事项",
        dataIndex: "bitemName",
        width: 180 ,
        slots: { customRender: 'se' }
      },
      {
        title: '公示期',
        dataIndex: "pubEdate",
        width: 200 ,
        slots: { customRender: 'date' }
      },
      {
        title: "审查意见",
        dataIndex: "nodeProcResult",
        width: 90 ,
        slots: { customRender: 'result' }
      },
      {
        title: "详情",
        dataIndex: "applyId",
        width:  80,
        slots: { customRender: 'detail' }
      }
    ]

    //公告
    const columns2 = [
      {
        title: "序号",
        width:80,
        align:"center",
        slots: { customRender: 'num' }
      },
      {
        title: "企业名称",
        width: 300,
        dataIndex: "corpName",
        slots: {
          customRender: 'merge'
        }
      },
      {
        title: "申请事项",
        dataIndex: "bitemName",
        width: 200,
        slots: { customRender: 'se' }
      },
      {
        title: '公告日期',
        dataIndex: "pubEdate",
        width: 120,
        slots: { customRender: 'date' }
      },
      {
        title: "详情",
        dataIndex: "applyId",
        width:  80,
        slots: { customRender: 'detail' }
      }

    ]
    return {
      aptTypes, queryParam, dataSource, columns,columns2, loading, pagination: paginationRef, getQualItem ,
      parseTime, tabChange, getTableList, handleSearch, handleReset, handleTableChange , ColorMapping
    };

  },
});
</script>

<style lang="less" scoped>

.apt-table{
  padding: 15px 20px;

  .title2{
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #E0E3EA;

    span{
      padding-left: 10px;
      line-height: 1;
      border-left: 4px solid #0078FF;
    }
  }
}

::v-deep(.ant-table){
  .ant-table-body {
    border: 1px solid #f0f0f0;
    border-bottom: none;
  }

  .ant-table-placeholder {
    border-right: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
  }
}

::v-deep(.ant-tabs){
  .ant-tabs-left-bar{
    width: 100%;
  }
}

</style>


